import * as echarts from "echarts";
import { useEffect, useRef, useState } from "react";
import { DatePicker } from 'antd'
import 'dayjs/locale/zh-cn';
import styles from "./index.module.scss"
import { foodlist } from "@/apis/admin/echar"
const qarr = ["Q1", "Q2", "Q3", "Q4"]
function updata(arr: any) {
    let result: any = []
    qarr.forEach((quarter) => {
        let found = arr.find((item: any) => item.quarter === quarter);
        if (!found) {
            result.push({ ...arr[0], quarter: quarter, count: 0 });
        } else {
            result.push(found);

        }
    })
    const result2: any = []
    result.forEach((item: any) => {
        result2.push(item.count)
    });
    return result2
}
const Echarts = ({ thems }: { thems: boolean }) => {

    const echartRef = useRef(null)
    const [current, setCurrent] = useState('2024')
    let echarObj: echarts.ECharts;
    const getdata = async () => {
        let year = Number(current)
        if (!current) {
            year = 2024
        }
        const res = await foodlist(year)
        console.log(res, 'dara')
        const Option = {
            title: {
                text: '上传数量：' + current,
                textStyle: {
                    color: thems ? "black" : 'white'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                textStyle: {
                    color: thems ? "black" : 'white'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    color: thems ? "black" : 'white'
                }

            },
            yAxis: {
                type: 'category',
                data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                axisLabel: {
                    color: thems ? "black" : 'white'
                }
            },
            series: [

            ]
        };
        const type1: any = {
            name: '主菜',
            type: 'bar',
            data: [],
            barWidth: '15%'
        }
        const type2: any = {
            name: '汤品',
            type: 'bar',
            data: [],
            barWidth: '15%'

        }
        const type3: any = {
            name: '甜点/烘焙',
            type: 'bar',
            data: [],
            barWidth: '15%'
        }
        const type4: any = {
            name: '饮品',
            type: 'bar',
            data: [],
            barWidth: '15%'

        }
        let temparr: any = []
        let temparr2: any = []
        let temparr3: any = []
        let temparr4: any = []
        res.data.forEach((item: any) => {
            if (item.type == '0') {
                temparr.push(item)
            }
            if (item.type == '1') {
                temparr2.push(item)
            }
            if (item.type == '2') {
                temparr3.push(item)
            }
            if (item.type == '3') {
                temparr4.push(item)
            }
        })
        type1.data = updata(temparr)
        type2.data = updata(temparr2)
        type3.data = updata(temparr3)
        type4.data = updata(temparr4)
        Option.series.push(type1 as never)
        Option.series.push(type2 as never)
        Option.series.push(type3 as never)
        Option.series.push(type4 as never)
        echarObj.setOption(Option)

    }
    useEffect(() => {
        getdata()
        echarObj = echarts.init(echartRef.current)
    }, [current, thems])
    const onChange = (_: any, dateString: any) => {
        console.log(dateString)
        console.log(current, 'sssss')
        echarObj.dispose()
        setCurrent(dateString)
    };
    return (
        <div style={{ width: "100%", display: "flex", flexDirection: "column" }}>
            <div>
                <DatePicker className={thems ? styles.datecolor : styles.datecolor2} placeholder="选择年份" onChange={onChange} picker="year" />
            </div>
            <div ref={echartRef} style={{ width: "100%", height: "300px" }}></div>

        </div>

    )
}

export default Echarts